<template>

    <el-col :span="2" :offset="1">
        <!-- 将其设计为一个计算属性 -->
        <el-checkbox></el-checkbox>
    </el-col>

    <el-col :span="6" :offset="2">
        {{ item.title }}
    </el-col>
    <el-col :span="3" :offset="5">
        <el-button type="danger" @click="delItem">删除</el-button>
    </el-col>

</template>

<script lang="ts">
import { defineComponent,computed } from 'vue'


export default defineComponent({
    props: ["item", "del", "index"],
    setup(props) {
        const delItem = () => {
            // 触发删除即可，删除需要传参 参数是index
            // console.log(props);
            props.del(props.index);
        };
        // 将多选框的值设计成为一个计算属性
        // props传递过来的值不能进行更能改 称为单向数据流

        const isCheck = computed({
            get() {
                return props.item.flag;
            },
            set(value) {
                console.log(value);
                // 将todoList 当中对应该项的todo对象中的flag改为true
            },
        });

        return {

            delItem,
            isCheck,
        }
    }
})
</script>

<style scoped>

</style>